<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('软件安装列表')" />
	<style>
		#bootstrap-table tr{
			border: 1px solid #ddd;
		}
		#bootstrap-table th{
			border: 1px solid #ddd;
		}
		.counter{
			color: #ffffff;
			display: block;
			font-size: 24px;
			font-weight: 600;
		}
		.text-right-btn{
			height: 96px;
			text-align: right;
		}
	</style>
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">
			<div class="btn-group-sm" role="group">
				<div class="btn btn-success col-md-2 col-sm-2 col-lg-3 text-right-btn" >
					<span class="counter">lightning</span>
					GPU 810个
				</div>
				<div class="btn btn-primary  col-md-2 col-sm-2 col-lg-3 text-right-btn">
					<span class="counter">常规处理</span>
					GPU 648个 核数 24136个
				</div>
				<div class="btn btn-danger  col-md-2 col-sm-2 col-lg-3 text-right-btn">
					<span class="counter"> 解释系统</span>
					1253个
				</div>
				<div class="btn btn-warning  col-md-2 col-sm-2 col-lg-3 text-right-btn">
					<span class="counter">特色功能包</span>
					162个
				</div>
			</div>


	        <!--<div class="btn-group-sm" id="toolbar" role="group">-->
				<!--<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="statistics:statisticsInstall:add">-->
					<!--<i class="fa fa-plus"></i> 添加-->
				<!--</a>-->
				<!--<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="statistics:statisticsInstall:edit">-->
					<!--<i class="fa fa-edit"></i> 修改-->
				<!--</a>-->
				<!--<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="statistics:statisticsInstall:remove">-->
					<!--<i class="fa fa-remove"></i> 删除-->
				<!--</a>-->
				<!--<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="statistics:statisticsInstall:export">-->
						<!--<i class="fa fa-download"></i> 导出-->
				 <!--</a>-->
			<!--</div>-->
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>

			<div class="col-lg-12">
				<div class="panel panel-border panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">项目数统计柱状图</h3>
					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar" style="height: 300px;width:1000px" ></div>
					</div>
					<div class="panel-heading">
						<h3 class="panel-title">处理统计柱状图 </h3>
					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar1" style="height: 300px;width:1000px" ></div>
					</div>
					<div class="panel-heading">
						<h3 class="panel-title">解释统计柱状图 </h3>
					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar2" style="height: 300px;width:1000px" ></div>
					</div>
				</div>
			</div> <!-- col -->

		</div>
	</div>
    <div th:include="include :: footer"></div>
	<script th:src="@{/js/echarts.common.min.js}"></script>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('statistics:statisticsInstall:edit')}]];
        var removeFlag = [[${@permission.hasPermi('statistics:statisticsInstall:remove')}]];
        var prefix = ctx + "statistics/statisticsInstall";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
                modalName: "软件安装",
		        showExport: true,
                columns:  [
                    [
                        {field: 'unit',title: "用户单位",valign:"middle", align:"center",colspan: 1, rowspan: 3 ,sortable: true},
                        {title: "lightning",valign:"middle", align:"center",colspan: 6, rowspan: 1 },
                        {title: "处理系统",valign:"middle", align:"center",colspan: 8, rowspan: 1 },
                        {title: "解释系统",valign:"middle", align:"center",colspan: 2, rowspan: 1 },
                        {title: "特色功能包",valign:"middle", align:"center",colspan: 2, rowspan: 1 },
                        {field: 'unit',title: "操作",valign:"middle", align:"center",colspan: 1, rowspan: 3,
                            formatter: function(value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-warning btn-xs " href="javascript:void(0)" onclick="$.operate.edit('+row.id+')">修改</a> ');
                                return actions.join('');
                            }
						},

                    ],
                    [
                        {title: "升级",valign:"middle", align:"center",colspan: 2, rowspan: 1 },
                        {title: "新增",valign:"middle", align:"center",colspan: 4, rowspan: 1 },
                        {title: "升级",valign:"middle", align:"center",colspan: 4, rowspan: 1 },
                        {title: "新增",valign:"middle", align:"center",colspan: 4, rowspan: 1 },
                        {title: "升级",valign:"middle", align:"center",colspan: 1, rowspan: 1 },
                        {title: "新增",valign:"middle", align:"center",colspan: 1, rowspan: 1 },
                        {title: "升级",valign:"middle", align:"center",colspan: 1, rowspan: 1 },
                        {title: "新增",valign:"middle", align:"center",colspan: 1, rowspan: 1 },
                    ],
                    [
                        {field: "lightningUpdateSetcount", title: "套数",valign:"middle", align:"center",switchable:false},
                        {field: "lightningUpdateGpu", title: "GPU数",valign:"middle", align:"center"},

                        {field: "lightningNewSetcount", title: "套数",valign:"middle", align:"center"},
                        {field: "lightningNewCpu", title: "CPU数",valign:"middle", align:"center"},
                        {field: "lightningNewGpu", title: "GPU数",valign:"middle", align:"center"},
                        {field: "lightningNewGpucore", title: "核数",valign:"middle", align:"center"},


                        {field: "clUpdateSetcount", title: "套数",valign:"middle", align:"center",switchable:false},
                        {field: "clUpdateCpu", title: "CPU数",valign:"middle", align:"center"},
                        {field: "clUpdateGpu", title: "GPU数",valign:"middle", align:"center"},
                        {field: "clUpdateGpucore", title: "核数",valign:"middle", align:"center"},

                        {field: "clNewSetcount", title: "套数",valign:"middle", align:"center"},
                        {field: "clNewCpu", title: "CPU数",valign:"middle", align:"center"},
                        {field: "clNewGpu", title: "GPU数",valign:"middle", align:"center"},
                        {field: "clNewGpucore", title: "核数",valign:"middle", align:"center"},

                        {field: "jsUpdateCount", title: "许可数",valign:"middle", align:"center"},
                        {field: "jsNewCount", title: "许可数",valign:"middle", align:"center"},

                        {field: "tsUpdateCount", title: "套数",valign:"middle", align:"center"},
                        {field: "tsNewCount", title: "套数",valign:"middle", align:"center"},

                    ]
                ]

            };
            $.table.init(options);


            var tempArray=[[${chulicounts}]];
            var teampArray2=[[${jieshicounts}]];
            var teampArray3=[[${tesecounts}]];
            var dataArray=tempArray.split(',');
            var dataArray2=teampArray2.split(',');
            var dataArray3=teampArray3.split(',');

            var myChart = echarts.init(document.getElementById('echarts-bar'));
            var myChart1 = echarts.init(document.getElementById('echarts-bar1'));
            var myChart2 = echarts.init(document.getElementById('echarts-bar2'));


            var option = {
                title: {
                    text: ''
                },
                grid : {
                    left : 80,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['处理软件(核)']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","塔里木","新疆","西南","吉林","大港","青海","华北","吐哈","冀东","玉门","浙江","煤层气","南方公司","勘探开发院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{formatter:'{value}'}
                },
                series: [{
                    name: '处理软件(核)',
                    type: 'bar',
                    data: dataArray,
                    itemStyle:{
                        normal:{
                            color:'#3c78b0'
                        }
                    },
                }],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };
            myChart.setOption(option);

            var option1 = {
                title: {
                    text: ''
                },
                grid : {
                    left : 80,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['解释软件(个)']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","塔里木","新疆","西南","吉林","大港","青海","华北","吐哈","冀东","玉门","浙江","煤层气","南方公司","勘探开发院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{formatter:'{value}'}
                },
                series: [
                    {
                        name: '解释软件(个)',
                        type: 'bar',
                        data: dataArray2,
                        itemStyle:{
                            normal:{
                                color:'#e04c4c'
                            }
                        },
                    }],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };
            myChart1.setOption(option1);

            var option2 = {
                title: {
                    text: ''
                },
                grid : {
                    left : 80,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['特色功能包(套)']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","塔里木","新疆","西南","吉林","大港","青海","华北","吐哈","冀东","玉门","浙江","煤层气","南方公司","勘探开发院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{formatter:'{value}'}
                },
                series: [
                    {
                        name: '特色功能包(套)',
                        type: 'bar',
                        data: dataArray3,
                        itemStyle:{
                            normal:{
                                color:'#82c25b'
                            }
                        },
                    }],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);

        });//http://211.149.205.33:18080/file/down/191127182611702
    </script>
</body>
</html>